<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('新增商品信息')"/>
    <link th:href="@{/ajax/libs/layui/css/layui.css}" rel="stylesheet"/>
    <link th:href="@{/xingkong/css/images.css}" rel="stylesheet">
    <th:block th:include="include :: select2-css"/>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-product-add">
        <h4 class="form-header h4">基本信息</h4>
        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-xs-2 control-label is-required">商品名称</label>
                    <div class="col-xs-6">
                        <input name="productName" class="form-control"
                               type="text">
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-xs-2 control-label is-required">商品类别</label>
                    <div class="col-xs-6">
                        <input name="categoryId" class="form-control" type="text" required>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-xs-2 control-label">商品状态</label>
                    <div class="col-xs-6">
                        <div class="radio-box " th:each="dict : ${@dict.getType('product_sale_status')}">
                            <input type="radio" th:id="${'productStatus_' + dict.dictCode}" name="productStatus"
                                   th:value="${dict.dictValue}"
                                   th:checked="${dict.default}" required>
                            <label th:for="${'productStatus_' + dict.dictCode}" th:text="${dict.dictLabel}"></label>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-xs-2 control-label">商品单位</label>
                    <div class="col-xs-6">
                        <input name="unit" class="form-control"
                               type="text">
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-xs-2 control-label">虚拟销量</label>
                    <div class="col-xs-6">
                        <input name="userName" class="form-control" type="text" maxlength="30"
                               required>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-xs-2 control-label">关键字</label>
                    <div class="col-xs-10">
                        <input name="kayword" class="form-control"
                               type="text">
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-xs-2 control-label">商品简介</label>
                    <div class="col-xs-10">
                        <textarea name="productBrief" maxlength="500" class="form-control" rows="3"></textarea>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-xs-2 control-label">首页主图</label>
                    <div class="col-xs-10">
                        <div class="layui-upload-img">
                            <img id="indexMainUrl" name="mainFileUrl" class="product-img" th:src="@{/img/add.png}">
                            <!--                            <input type="hidden" name="mainFileUrl" id="mainFileUrl">-->
                        </div>

                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-xs-2 control-label">详情轮播图</label>
                    <div class="col-xs-10">
                        <div class="layui-upload" id="detailSwiperImgs">
                            <img th:src="@{/img/add.png}" id="detailSwiperImg" class="product-img">
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-xs-2 control-label">商品详情图</label>
                    <div class="col-xs-10">
                        <div class="layui-upload" id="prdutDetalimages">
                            <img th:src="@{/img/add.png}" id="prdutDetalimage" class="product-img">
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-2 control-label">成本价</label>
                    <div class="col-xs-2">
                        <input type="text" class="form-control">
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-2 control-label">市场价</label>
                    <div class="col-xs-2">
                        <input type="text" class="form-control">
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-2 control-label">销售价</label>
                    <div class="col-xs-2">
                        <input type="text" class="form-control">
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-2 control-label">会员价</label>
                    <div class="col-xs-2">
                        <input type="text" class="form-control">
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-2 control-label">库存</label>
                    <div class="col-xs-2">
                        <input type="text" class="form-control">
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-2 control-label">规格</label>
                    <div class="col-xs-1">
                       <input type="button" onclick="addSpec()" value="添加规格" class="btn btn-w-m btn-info">
                    </div>
                    <div class="col-xs-6">
                        <label class="control-label">例如服装有 颜色，尺寸等规格供用户选择</label>
                    </div>

                </div>
            </div>
        </div>
        <div class="row" id="specs">

        </div>

        <div class="row">
            <div class="col-sm-6">
            </div>
            <div class="col-sm-6">
            </div>
        </div>
    </form>
</div>
<th:block th:include="include :: footer"/>
<script th:src="@{/ajax/libs/layui/layui.js}"></script>
<script th:src="@{/xingkong/js/image-upload.js}"></script>
<th:block th:include="include :: select2-js"/>
<script type="text/javascript">

    var specHead =new Array();
    var specValue = new Array();
    $("#productSpec").on("select2:select",function (e) {
         specHead.push(e.params.data.text);
         $("#specs").append('<div class="row col-sm-12" id="'+params.data.id+'"> <div class="row col-sm-8">' +
             '                <label class="col-sm-2 control-label">'+e.params.data.text+'</label>' +
             '                <div class="col-xs-2">' +
             '                   <input type="text" class="form-control" name="specValue" placeholder="请输入属性值">' +
             '                </div>\n' +
             '                <div class="col-sm-2">' +
             '                    <input type="button" class="btn btn-w-m btn-info" value="增加" onclick="addSpecValue(this)">' +
             '                </div>' +
             '            </div>' +
             '</div>');
        // console.log("e.val = "+e.params.data.id)
        // console.log( "e.text = " +)
    });
    $("#productSpec").on("select2:unselect",function (e) {
        console.log("e.val = "+e.params.data.id)
        console.log( "e.text = " +e.params.data.text)
    });

    var prefix = ctx + "product/product"
    $("#form-product-add").validate({
        focusCleanup: true
    });

    function submitHandler() {
        if ($.validate.form()) {
            $.operate.save(prefix + "/add", $('#form-product-add').serialize());
        }
    }

    var uploadUrl = ctx + 'common/upload';
    $.imageManager.uploadImage(uploadUrl, "indexMainUrl", "indexMainUrl");
    $.imageManager.uploadImages(uploadUrl, "detailSwiperImg", "detailSwiperImgs");
    $.imageManager.uploadImages(uploadUrl, "prdutDetalimage", "prdutDetalimages");

    function addSpec(){
        $.operate.open("设置规则","url",600,400,callback);
    }
    function callback() {

    }



</script>
</body>
</html>